<script setup lang="ts">
import { ref } from "vue";

const dialogVisible = ref(false)
const userList: any = ref()
const winners: any = ref([])

const init = (row: any) => {
  winners.value = []
  winners.value = row.winners
  userList.value = row.participants
  dialogVisible.value = true
}

defineExpose({
  init
})
</script>

<template>
  <el-dialog :close-on-click-modal="false" v-model="dialogVisible" :title="winners.length > 0 ? '比赛结果' : '报名列表'">
    <div class="body" v-if="!(winners.length > 0)">
      <div class="list" v-for="item in userList" :key="item._id">
        <div class="item-image center">
          <el-tooltip
              class="box-item"
              effect="dark"
              :content="item.phone"
              placement="bottom"
          >
            <div v-html="item.avatarSvg"></div>
          </el-tooltip>

        </div>
        <div class="item-name center">
          {{ item.username }}
        </div>
      </div>
    </div>
    <div class="body" v-else>
      <div class="list" v-for="item in winners" :key="item._id">
        <div class="item-image center">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="item.phone"
            placement="bottom"
          >
            <div v-html="item.avatarSvg"></div>
          </el-tooltip>

        </div>
        <div class="item-name center">
          {{ item.username }}
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.title {
  height: 120px;
  display: flex;
  flex-direction: column;

  .title-name {
    font-size: 20px;
    margin-top: 10px;
    color: #8b51fd;
  }
}

.body {

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .list {
    margin-right: 30px;
    margin-top: 30px;
  }
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
